<template>
  <md-popover
    placement="top"
    off
    width="160"
    trigger="click"
    :offset="18"
    v-model="visible"
  >
    <template #reference>
      <slot></slot>
    </template>

    <slot name="tips"
      >是否确认删除

      <div class="action-button">
        <md-button
          type="text"
          @click="
            () => {
              $emit('cancel');
              visible = false;
            }
          "
          >取消</md-button
        >
        <md-button class="confirm" type="primary" @click="handleConfirm"
          >确认</md-button
        >
      </div>
    </slot>
  </md-popover>
</template>

<script>
import { MdButton, MdPopover } from '@mdfe/medi-ui';

export default {
  props: ['onOk'],
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    handleConfirm() {
      this.$emit('ok');
      this.onOk?.();
      this.visible = false;
    },
  },
  components: {
    MdButton,
    MdPopover,
  },
};
</script>

<style lang="scss" scoped>
.action-button {
  margin-top: var(--md-spacing-3);
  text-align: right;
}

.confirm {
  margin-left: var(--md-spacing-3);
}
</style>
